<template>
  <div class="main">
    <div class="item-content">
      {{ eqm.name }}
    </div>
    <div class="main-item">
      <div :class="['main-item-img', eqm.type]" />
    </div>
    <div v-if="!isResult" class="result-value">频率：{{ eqm.frequency_before ? eqm.frequency_before : 0 }}</div>
    <div v-else class="result-value">频率：{{ eqm.frequency_after ? eqm.frequency_after : 0 }}</div>
  </div>
</template>

<script>
export default {
  name: 'EqmCard',
  props: {
    eqm: {
      type: Object,
      required: false,
      default: () => {}
    },
    isResult: {
      type: Boolean,
      default: false
    }
  }

}
</script>
<style lang="scss" scoped>
.main{
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
  color: white;
}
.item-content{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #394c62;
  border-bottom: 1px solid #394c62;
  padding: 0 10px;
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出文本以省略号显示 */
}

.main-item{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #394c62;
  border-bottom: 1px solid #394c62;
  padding: 1rem 0;
}
.main-item-img{
  width: 70%;
  margin: 0 10%;
  height: 6rem;
  flex-grow: 0;
}
.result-value{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid #394c62;
  border-bottom: 1px solid #394c62;
}
.host {
  background: url('~@assets/csot/冰机.svg') no-repeat center center;
}
.TowerGroup {
  background: url('~@assets/csot/MAU.svg') no-repeat center center;
}
.pump {
  background: url('~@assets/csot/泵.svg') no-repeat center center;
}
</style>
